<template>
  <section class="py-32 md:py-48">
    <div class="container flex flex-wrap lg:flex-no-wrap">
      <div
        class="w-full lg:w-5/12 pt-20 lg:pt-8 pb-20 px-8 lg:px-16 bg-gray-900 text-white text-center rounded-lg"
      >
        <img
          class="h-48 mx-auto max-w-xs"
          src="../assets/open-source-logo.svg"
        />
        <h2 class="text-3xl font-extrabold whitespace-normal sm:whitespace-no-wrap">
          Free and Open Source
        </h2>
        <p class="lg:min-h-32 mt-3">
          Frappe Books is free software. This means it comes with the four
          essential freedoms. You are allowed to run it as you wish, you can
          look at its source code and modify it.
        </p>
        <div class="mt-10">
          <Button class="bg-brand text-white">
            Learn More ⟶
          </Button>
        </div>
      </div>
      <div
        class="w-full lg:w-7/12 px-8 lg:px-24 pb-20 text-white text-center rounded-lg lg:ml-8 mt-8 lg:mt-0"
        style="background-image: linear-gradient(-143deg, #4AC3F8 0%, #2490EF 100%);"
      >
        <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <clipPath id="circleClip">
              <path
                d="M81.941 19.296C77.53 26.843 75 35.626 75 45c0 9.374 2.529 18.157 6.941 25.704C73.811 82.368 60.297 90 45 90 20.147 90 0 69.853 0 45S20.147 0 45 0c15.297 0 28.81 7.632 36.941 19.296z"
                fill="#88C149"
                fill-rule="evenodd"
              />
            </clipPath>
          </defs>
        </svg>
        <div class="mt-20 pt-2 flex justify-center">
          <div
            class="w-20 h-20 lg:w-24 lg:h-24 rounded-full flex items-center justify-center"
            style="background-color: #88C149;"
          >
            <svg width="46" height="51" xmlns="http://www.w3.org/2000/svg">
              <g fill="#FFF" fill-rule="nonzero">
                <path
                  d="M20.828.542c1.25-.716 2.88-.72 4.13 0 6.286 3.552 12.575 7.099 18.86 10.653 1.183.666 1.973 1.982 1.961 3.344v21.372c.01 1.419-.86 2.766-2.107 3.417-6.266 3.533-12.529 7.07-18.794 10.602-1.276.73-2.938.674-4.175-.116-1.878-1.089-3.76-2.172-5.639-3.26-.384-.229-.816-.411-1.088-.783.24-.323.669-.364 1.017-.505.784-.249 1.504-.65 2.224-1.038.183-.124.405-.077.58.035 1.606.921 3.198 1.869 4.81 2.781.344.199.692-.065.986-.229 6.149-3.475 12.305-6.937 18.453-10.413a.61.61 0 00.335-.601c.005-7.05.001-14.102.002-21.152a.661.661 0 00-.393-.66C35.745 10.474 29.504 6.952 23.26 3.435a.65.65 0 00-.735-.001c-6.244 3.518-12.484 7.043-18.727 10.56a.653.653 0 00-.396.656v21.153a.598.598 0 00.34.593c1.666.945 3.334 1.883 5.001 2.824.94.506 2.092.806 3.127.42.913-.328 1.553-1.26 1.536-2.23.009-7.009-.004-14.019.006-21.027-.022-.311.273-.568.575-.539.8-.005 1.602-.01 2.403.002.334-.007.564.328.523.641-.004 7.054.008 14.107-.006 21.16.002 1.88-.77 3.926-2.509 4.846-2.142 1.11-4.79.874-6.906-.19-1.832-.914-3.58-1.993-5.38-2.973-1.25-.647-2.115-2-2.106-3.417V14.539c-.013-1.39.81-2.73 2.028-3.386C8.3 7.617 14.565 4.079 20.828.542z"
                />
                <path
                  d="M26.294 15.346c2.732-.175 5.657-.104 8.116 1.242 1.904 1.032 2.96 3.197 2.993 5.312-.053.285-.352.442-.624.423-.793-.001-1.586.01-2.378-.006-.337.013-.532-.297-.574-.594-.228-1.012-.78-2.014-1.733-2.502-1.462-.732-3.157-.696-4.751-.68-1.164.061-2.416.162-3.402.847-.757.518-.987 1.565-.717 2.408.255.605.954.8 1.525.98 3.293.861 6.783.776 10.013 1.91 1.337.461 2.645 1.36 3.103 2.76.599 1.876.336 4.12-.999 5.626-1.083 1.24-2.66 1.914-4.232 2.28-2.093.467-4.264.479-6.389.272-1.998-.228-4.077-.753-5.62-2.114-1.319-1.145-1.963-2.93-1.899-4.652.015-.29.305-.494.584-.47.798-.006 1.596-.008 2.395.001.318-.023.555.253.571.554.148.964.51 1.976 1.35 2.547 1.623 1.047 3.66.975 5.517 1.005 1.54-.069 3.267-.09 4.523-1.107.663-.58.86-1.55.68-2.386-.194-.705-.932-1.034-1.565-1.248-3.25-1.029-6.78-.656-9.998-1.818-1.307-.462-2.571-1.336-3.073-2.678-.7-1.9-.38-4.251 1.095-5.707 1.439-1.448 3.515-2.005 5.489-2.205z"
                />
              </g>
            </svg>
          </div>
          <div
            class="w-20 h-20 lg:w-24 lg:h-24 rounded-full flex items-center justify-center"
            style="background-color: #2f3241"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 64 64"
              width="48"
              height="48"
              fill="#9feaf9"
              fill-rule="evenodd"
            >
              <path
                d="M23.3 13.756c-8.363-1.523-14.976.07-17.612 4.636-1.967 3.406-1.405 7.923 1.363 12.75a.86.86 0 0 0 1.171.317.86.86 0 0 0 .317-1.171c-2.493-4.35-2.978-8.247-1.366-11.04 2.2-3.792 8.088-5.214 15.82-3.806a.86.86 0 0 0 .997-.69.86.86 0 0 0-.69-.997zM11.4 37c3.382 3.716 7.775 7.202 12.786 10.095C36.328 54.1 49.243 55.98 55.6 51.64a.86.86 0 0 0 .225-1.192.86.86 0 0 0-1.192-.225c-5.697 3.884-17.966 2.106-29.6-4.605-4.86-2.806-9.115-6.182-12.375-9.764a.86.86 0 0 0-1.212-.057.86.86 0 0 0-.057 1.212zm42.178-1.033c5.476-6.47 7.388-12.976 4.758-17.53-1.935-3.352-6.026-5.122-11.464-5.192a.86.86 0 0 0-.869.846.86.86 0 0 0 .846.869c4.9.064 8.415 1.588 10 4.335 2.185 3.784.48 9.586-4.582 15.566a.86.86 0 0 0 .1 1.209.86.86 0 0 0 1.209-.1zM39.504 14.04c-4.95 1.06-10.222 3.135-15.283 6.057C11.697 27.327 3.527 38 4.66 45.72a.86.86 0 0 0 .973.724.86.86 0 0 0 .724-.973c-1.007-6.864 6.737-16.97 18.72-23.9 4.9-2.835 10.013-4.843 14.785-5.866a.86.86 0 0 0 .659-1.018.86.86 0 0 0-1.018-.659z"
              />
              <path
                d="M19.215 51.082C22.078 59.077 26.762 64 32.03 64c3.842 0 7.396-2.62 10.167-7.23a.86.86 0 0 0-.293-1.177.86.86 0 0 0-1.177.293c-2.5 4.143-5.55 6.397-8.697 6.397-4.375 0-8.553-4.4-11.2-11.78a.86.86 0 0 0-1.097-.518.86.86 0 0 0-.518 1.097zm26.153-1.564c1.482-4.737 2.278-10.2 2.278-15.895 0-14.208-4.973-26.456-12.056-29.6a.86.86 0 0 0-1.132.436.86.86 0 0 0 .436 1.132C41.212 8.395 45.93 20.02 45.93 33.624c0 5.524-.77 10.816-2.2 15.383a.86.86 0 0 0 .562 1.075.86.86 0 0 0 1.075-.562zm16.152-.84c0-2.267-1.838-4.105-4.105-4.105S53.3 46.4 53.3 48.678s1.838 4.105 4.105 4.105 4.105-1.838 4.105-4.105zm-1.715 0a2.39 2.39 0 0 1-2.389 2.389 2.39 2.39 0 0 1-2.389-2.389 2.39 2.39 0 0 1 2.389-2.389 2.39 2.39 0 0 1 2.389 2.389z"
              />
              <path
                d="M6.584 52.783c2.267 0 4.105-1.838 4.105-4.105s-1.838-4.105-4.105-4.105a4.1 4.1 0 1 0 .001 8.21zm0-1.715a2.39 2.39 0 0 1-2.389-2.389 2.39 2.39 0 0 1 2.389-2.389 2.39 2.39 0 0 1 2.389 2.389 2.39 2.39 0 0 1-2.389 2.389zM32.03 8.2c2.267 0 4.105-1.838 4.105-4.105S34.296 0 32.03 0s-4.105 1.838-4.105 4.105S29.763 8.2 32.03 8.2zm0-1.715a2.39 2.39 0 0 1-2.389-2.389 2.39 2.39 0 0 1 2.389-2.389 2.39 2.39 0 0 1 2.389 2.389 2.39 2.39 0 0 1-2.389 2.389zm.626 30.04a2.97 2.97 0 1 1-1.254-5.806 2.97 2.97 0 1 1 1.254 5.806z"
              />
            </svg>
          </div>
          <div
            class="w-20 h-20 lg:w-24 lg:h-24 bg-white rounded-full flex items-center justify-center"
          >
            <svg
              class="pt-2"
              width="48"
              height="48"
              viewBox="0 0 256 221"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              preserveAspectRatio="xMidYMid"
            >
              <g>
                <path
                  d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z"
                  fill="#41B883"
                ></path>
                <path
                  d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z"
                  fill="#41B883"
                ></path>
                <path
                  d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z"
                  fill="#35495E"
                ></path>
              </g>
            </svg>
          </div>
        </div>
        <h2 class="mt-10 text-3xl font-extrabold">
          How did we do it?
        </h2>
        <p class="lg:min-h-32 mt-3">
          Frappe Books is built with our homegrown framework FrappeJS based on
          NodeJS and bundled with Electron. But it is still designed in a way
          how a desktop software functions.
        </p>
        <div class="mt-10">
          <Button class="bg-white text-brand">
            Learn More ⟶
          </Button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="w-full rounded-lg pt-16 mt-8 bg-blue-100 text-center">
        <h2 class="text-3xl font-extrabold px-8">From the team behind ERPNext</h2>
        <p class="mt-3 mx-8 md:mx-32 lg:mx-48">
          We have been building business software for over a decade now.
          Learning from our mistakes and picking the best parts of our flagship
          product ERPNext, we came up with a simple app that does one thing
          well, Accounting.
        </p>
        <g-image
          class="w-4/5 mx-auto rounded-t-lg mt-12"
          src="../assets/team-1.png"
        />
      </div>
    </div>
  </section>
</template>
